<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<text class="titlePage">登录</text>
		</view>
		<view class="flexJcacfdc title" style="position: relative;">
			<image class="logo-img" src="/static/images/image.png"></image>
			<text>衷依慧店-工作台</text>
		</view>


		<view class="login-form-content">
			<u--form labelPosition="left" :model="loginForm" ref="uForm">
				<!-- <u-form-item  prop="radiovalue" ref="item1">
					<u-radio-group
					    v-model="params.radiovalue"
					    placement="row"
						class="flexjsbac"
						activeColor="#C27E15"
						labelColor="#333333"
						labelSize='35rpx'
					  >
					    <u-radio
					      v-for="(item, index) in radiolist1"
					      :key="index"
					      :label="item.name"
					      :name="item.name"
					    >
					    </u-radio>
					  </u-radio-group>
				</u-form-item> -->
				<u-form-item prop="name" borderBottom ref="item1">
					<u--input v-model="loginForm.username" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>
				<u-form-item prop="code" borderBottom ref="item1" v-if="!showPassword">
					<u--input v-model="loginForm.password" border="none" placeholder="请输入密码" type="password"></u--input>
					<u-icon slot="right" name="eye-fill" size="25" @click="iconClick"></u-icon>

				</u-form-item>
				<u-form-item prop="code" borderBottom ref="item1" v-else>
					<u--input v-model="loginForm.password" border="none" placeholder="请输入密码"></u--input>
					<u-icon slot="right" name="eye" size="25" @click="iconClick"></u-icon>
				</u-form-item>

			</u--form>
			<view class="remember flexjsbac">
				<!-- <view class=""> -->
				<!-- <text class="updatePassword">修改密码</text> -->
				<!-- </view> -->
				<u-checkbox-group v-model="valuepass">
					<u-checkbox label="记住密码" shape="circle" name="1"></u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="action-btn">
				<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
			</view>
			<view class="bottom-condition">
				<u-checkbox-group v-model="value">
					<u-checkbox shape="circle" name="1"></u-checkbox>
				</u-checkbox-group>
				<text class="text">
					我已经阅读同意
					<text style="color: #C27E15;"  @click="handlePrivacy">《衷依健康服务隐私权政策》</text>
					及<text style="color: #C27E15;" @click="handleUserAgrement">《衷依健康服务会员协议》</text>
				</text>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getCodeImg
	} from '@/api/login'

	export default {
		data() {
			return {
				codeUrl: "",
				captchaEnabled: false,
				showPassword: false,
				// 用户注册开关
				register: false,
				globalConfig: getApp().globalData.config,
				loginForm: {
					username: '',
					password: ''
					// username: "15811115047",
					// password: "123456",
				},
				params: {},
				value: [],
				valuepass: ['1'],
			}
		},
		created() {
			// this.getCode()
			if (uni.getStorageSync('accound')) {
				this.loginForm = uni.getStorageSync('accound')
			}
		},
		methods: {
			toPath(status) {
				if (status) {
					uni.navigateTo({
						url: '/subPage/shopp/index'
					})
				} else {
					uni.navigateTo({
						url: '/subPage1/cheche/index'
					})
				}
			},
			iconClick() {
				this.showPassword = !this.showPassword
			},
			// 用户注册
			handleUserRegister() {
				this.$tab.redirectTo(`/pages/register`)
			},
			// 隐私协议
			handlePrivacy() {
				console.log(1111);
				this.$tab.navigateTo(`/subPages/mine/privacyPolicy?title=privacy_agreement`)
			},
			// 用户协议
			handleUserAgrement() {
				// let site = this.globalConfig.appInfo.agreements[1]
				this.$tab.navigateTo(`/subPages/mine/privacyPolicy?title=user_agreement`)
			},
			// 获取图形验证码
			getCode() {
				getCodeImg().then(res => {
					this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
					if (this.captchaEnabled) {
						this.codeUrl = 'data:image/gif;base64,' + res.img
						this.loginForm.uuid = res.uuid
					}
				})
			},
			// 登录方法
			async handleLogin() {
				if (this.loginForm.username === "") {
					this.$refs.uToast.show({
						type: "default",
						message: "请输入您的账号",
					})
					// this.$modal.msgError("")
				} else if (this.loginForm.password === "") {
					this.$refs.uToast.show({
						type: "default",
						message: "请输入您的密码",
					})
					// this.$modal.msgError("请输入您的密码")
				} else {
					if (this.value.length == 0) {
						this.$refs.uToast.show({
							type: "default",
							message: "请先阅读并同意隐私政策和服务协议!",
						})
						// this.$modal.msgError("请先阅读并同意隐私政策和服务协议!")
						return
					}
					this.$modal.loading("登录中，请耐心等待...")
					this.pwdLogin()
				}
			},
			// 密码登录
			async pwdLogin() {
				this.loginForm.uuid = 'flag'
				this.$store.dispatch('Login', this.loginForm).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				}).catch(() => {
					// if (this.captchaEnabled) {
					// 	this.getCode()
					// }
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				if (this.valuepass.length != 0) {
					uni.setStorageSync('accound', this.loginForm)
				} else {
					uni.removeStorageSync('accound')
				}
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					uni.setStorageSync('roles', res.user.roles[0].roleId)
					uni.setStorageSync('role', res.roles[0])
					uni.setStorageSync('userInfo', res.user)
					uni.setStorageSync('userId', res.user.userId) // 将 userId 存储到本地
					uni.setStorageSync('technician', res.technician) // 技师的相关信息
					this.$tab.reLaunch('/pages/index')
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.titlePage {
		font-size: 38rpx;
		font-weight: bold;
		color: #333333;
	}

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 80rpx;
		}

		.title {
			.logo-img {
				width: 400rpx;
				height: 100rpx;
				margin: 140rpx 0 40rpx;
			}

			font-size: 45rpx;
			font-family: Source Han Sans CN,
			Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			line-height: 53rpx;
			letter-spacing: 1px;
		}

		.login-form-content {
			text-align: center;
			margin: 80rpx 60rpx 0;

			.remember {
				margin-top: 38rpx;

				.updatePassword {
					color: #606266;
					font-size: 30rpx;
					line-height: 30rpx;
				}
			}

			.login-btn {
				margin-top: 30rpx;
				height: 90rpx;
				background: #C27E15;
			}

			.codeClass {
				width: 189rpx;
				height: 69rpx;
				line-height: 69rpx;
				border-radius: 11rpx;
				opacity: 1;
				border: 1rpx solid #C27E15;
				font-size: 35rpx;
				font-weight: 400;
				color: #C27E15;
			}
		}
	}

	::v-deep.u-radio-group {
		justify-content: space-around;
		flex: 0 1 auto !important;
	}

	.bottom-condition {
		display: flex;
		align-items: flex-start;
		margin-top: 50rpx;

		.text {
			text-align: left;
		}
	}
</style>